Commonly Used Pseudo-Elements in CSS
Pseudo-elements allow you to style specific parts of an element or insert content without modifying the HTML. Some pseudo-elements are widely used for text formatting and decorative purposes.
::before- Inserts content before an element's content.::after- Inserts content after an element's content.::first-letter- Styles the first letter of a block-level element.::first-line- Styles the first line of a block-level element.::selection- Styles the portion of text selected by the user.::placeholder- Styles the placeholder text of input elements.::marker- Styles the marker of list items (li).
In this example, ::first-letter styles the first letter, ::before and ::after add decorative content, ::placeholder styles the input placeholder, and ::selection changes the appearance of selected text.
Use pseudo-elements for decorative or structural styling without extra HTML.
Combine them with CSS properties like
content,color,font-size, andbackground.Test across browsers to ensure consistent behavior.
Avoid using pseudo-elements for interactive content that requires JavaScript functionality.